<template>
<div class="list-group">
<div class="list-group-item">
<button type="button" class="vue-btn vue-btn-default block" @click="showAlert">确认弹出框</button>
</div>
<Alert 
:visible.sync="alert.visible"
:title="alert.title"
:transition="alert.transition"
:content="alert.content"
@ok="onOk"
></Alert>
</div>
</template>

<script>
import Alert from "components/message/alert"

export default{
	components:{
 		Alert
 	},
 	data(){
 		var self=this;
 		return{
	 		"alert":{
	 			visible:false,
	 			title:"AlertTitle",
	 			transition:"vue-message-center",
	 			content:"这是一个Alert弹出框。"
	 		}
 		}
 	},
 	methods:{
 		showAlert:function(){
 			this.alert.visible=true;
 		},
 		onOk(){
 			alert("alert");
 		}
 	}
}
</script>